<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        body{ background-color:#376EA7; height:800px;}
        .item { padding:30px; line-height:30px; color:#FFF; display:inline-block; margin:5px;}
        .item a { color:#FFF }
        .item h3 { font-size:30px; }
        .red { background-color: red;}
        .blue { background-color: blue;}
        .yellow {background-color: yellow;}
        .green {background-color: green;}
    </style>
    </head>
    <body>
        <div class="user-info">
            <div class="face"><a href="#"><img src="">
        </div>
    <div class="metro-desktop">
        <ul>
            <li class="item blue">
                <h3>客户管理</h3>
                <p>管理您的客户</p>
                <p><a href="#">30</a>个客户,<a href="#">5</a>个预约客户</p>
            </li>
            <li class="item red">
                <h3>客户管理</h3>
                <p>管理您的客户</p>
                <p><a href="#">30</a>个客户,<a href="#">5</a>个预约客户</p>
            </li>
            <li class="item yellow">
                <h3>客户管理</h3>
                <p>管理您的客户</p>
                <p><a href="#">30</a>个客户,<a href="#">5</a>个预约客户</p>
            </li>
            <li class="item green">
                <h3>客户管理</h3>
                <p>管理您的客户</p>
                <p><a href="#">30</a>个客户,<a href="#">5</a>个预约客户</p>
            </li>
        </ul>
    </div>
    </body>
</html>
